<template>
  <div class="info-container">
    <div class="assets-header">
      <div class="header-name">{{ departmentInfo.name }}资产详情</div>
      <el-button type="primary" @click="goback">返回上一级</el-button>
    </div>
    <departmentDetail
      :dialogTableVisible="dialogTableVisible"
      :dialogName="dialogName"
      :department_id="route.query.id"
      :dialogZczt="dialogZczt"
      :dialogZcxl="dialogZcxl"
      @close="closeDialog"
    ></departmentDetail>
    <div class="assets-overview">
      <div
        class="overView-item"
        v-for="item in assetsOverview"
        @click="openDialog(item)"
      >
        <div class="item-name">
          <div class="name">{{ item.name }}</div>
          <div class="img">
            <img :src="item.imgsrc" alt="" />
          </div>
        </div>
        <div class="item-value">{{ item.value }}</div>
      </div>
    </div>
    <div class="com-container">
      <PrintInfo :printInfo="printInfo"></PrintInfo>
      <NoAssetsPerson></NoAssetsPerson>
      <leaveAssets :leaveAssetsList="leaveAssetsList"></leaveAssets>
    </div>
    <DepartAssets :useAssetsList="useAssetsList"></DepartAssets>
  </div>
</template>

<script setup>
import NoAssetsPerson from "@/components/info/noAssetsPerson.vue";
import PrintInfo from "@/components/info/printInfo.vue";
import leaveAssets from "@/components/info/leaveAssets.vue";
import departmentDetail from "@/components/info/departmentDetail.vue";
import { ref, reactive } from "vue";
import DepartAssets from "@/components/info/departAssets.vue";
import { useRoute, useRouter } from "vue-router";
import { getAssestList } from "@/api/index";
// 滚动条到顶部
window.scrollTo(0, 0);

const route = useRoute();
const router = useRouter();
const departmentInfo = ref({});
const dialogTableVisible = ref(false);
const dialogName = ref("");
const dialogZczt = ref("");
const dialogZcxl = ref("");
departmentInfo.value = JSON.parse(
  window.localStorage.getItem("departmentInfo")
);
// 打印机数据
const printInfo = ref([]);
// 闲置资产列表
const leaveAssetsList = ref([]);
// 使用中资产列表
const useAssetsList = ref([]);
// 报废资产
const scrapAssets = ref([]);
const assetsOverview = reactive([
  {
    name: "部门总人数",
    value: departmentInfo.value.number,
    imgsrc: new URL("@/assets/img/person.png", import.meta.url).href,
    isClick: false,
  },
  {
    name: "部门总资产",
    value: departmentInfo.value.value,
    imgsrc: new URL("@/assets/img/assetslogo.png", import.meta.url).href,
    isClick: true,
    zcxl: "",
    zczt: "",
  },
  {
    name: "办公设备",
    value: departmentInfo.value.office,
    imgsrc: new URL("@/assets/img/comput.png", import.meta.url).href,
    isClick: true,
    zcxl: "1",
    zczt: "",
  },
  {
    name: "其他资产",
    value:
      departmentInfo.value.value -
      departmentInfo.value.scrapAssetCount -
      departmentInfo.value.idleAssetCount -
      departmentInfo.value.office,
    imgsrc: new URL("@/assets/img/useassets.png", import.meta.url).href,
    isClick: true,
    zcxl: "2",
    zczt: "",
  },
  {
    name: "闲置资产",
    value: departmentInfo.value.idleAssetCount,
    imgsrc: new URL("@/assets/img/leave.png", import.meta.url).href,
    isClick: true,
    zcxl: "",
    zczt: "0",
  },
  {
    name: "报废资产",
    value: departmentInfo.value.scrapAssetCount,
    imgsrc: new URL("@/assets/img/lose.png", import.meta.url).href,
    isClick: true,
    zcxl: "",
    zczt: "2",
  },
]);
getAssestList({ department_id: route.query.id, page: 1, size: 100 }).then(
  ({ data: res }) => {
    if (res.code == 0) {
      useAssetsList.value = res.data.list;
      res.data.list.forEach((item) => {
        if (item.zcmcx == 8) {
          printInfo.value.push({
            name: item.pp,
            model: item.xh,
            user: item.lastname,
          });
        }
        if (item.zczt == 0) {
          leaveAssetsList.value.push(item);
        }
        if (item.zczt == 2) {
          scrapAssets.value.push(item);
        }
      });
    }
  }
);
function goback() {
  router.push({
    name: "assets",
  });
}
function openDialog(item) {
  if (!item.isClick) return;
  dialogTableVisible.value = true;
  dialogZcxl.value = item.zcxl;
  dialogZczt.value = item.zczt;
  dialogName.value = item.name;
}
function closeDialog() {
  dialogName.value = "";
  dialogZczt.value = "";
  dialogZcxl.value = "";
  dialogTableVisible.value = false;
}
</script>

<style scoped lang="less">
@import "@/styles/common.less";

.info-container {
  .page-container();

  .com-container {
    width: 100%;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
  }
}
</style>
